/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 15:31:32
 * @Auditor:
 */
import React, { memo } from 'react';
import { Input } from 'antd';
import { useDrag, DragSourceMonitor, useDrop } from 'react-dnd';
import Icon from './../../icon/Icon';
import styles from './style.module.scss';
import { TabsOptionProps } from '../interface';

const type = 'optionSettingItem';

const style: React.CSSProperties = {
  marginBottom: '.5rem',
  cursor: 'move',
};

interface ItemProps {
  id: string;
  type: string;
}

interface IProps {
  item: TabsOptionProps;
  deleteTabs: () => void;
  setCurColumn: () => void;
  move(draggedId: string, hoverId: string): void;
}

const OptionSettingItem = ({ item, deleteTabs, move, setCurColumn }: IProps) => {
  // const changeTitle = (e: React.BaseSyntheticEvent) => change(originalIndex, 'title', e.target.value);
  // const changeDataIndex = (e: React.BaseSyntheticEvent) => change(originalIndex, 'dataIndex', e.target.value);

  const [{ isDragging }, drag, dragPreview] = useDrag(
    {
      type,
      item: { type, id: item.id },

      collect: (moniter: DragSourceMonitor) => ({
        isDragging: moniter.isDragging(), // dragCollect.isDragging
      }),
    },
    []
  );

  const [, drop] = useDrop(
    () => ({
      accept: type,
      canDrop: () => false,
      hover: ({ id: draggedId }: ItemProps) => {
        if (draggedId !== item.id) {
          move(draggedId, item.id);
        }
      },
    }),
    [move]
  );

  const opacity = isDragging ? 0 : 1;

  return (
    <li ref={(node) => dragPreview(drop(node))} style={{ ...style, opacity }}>
      <span ref={(node) => drag(node)} className={styles.move}>
        <Icon icon="&#xe671;" />
      </span>

      <Input value={item.lable} style={{ cursor: 'pointer' }} readOnly onClick={() => setCurColumn()} />
      <Icon onClick={() => setCurColumn()} className={styles.remove} icon="edit" />
      <Icon onClick={() => deleteTabs()} className={styles.remove} icon="remove" />
    </li>
  );
};

export default memo(OptionSettingItem);
